import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { NavBar, Swiper, Cell, Image, Divider } from "react-vant";
import ListItem from '../../components/listItem'
import { addCollect } from "../../store/modules/user/userActions";
const Index = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [loadMore, setLoadMore] = useState(false)
  const list = useSelector((state) => state.listReducer.list);
  const item = list.find((v) => v.id === id);
  const dispatch = useDispatch()
  const handleClickRight = () => {
    dispatch(addCollect(item))
  }
  return (
    <div>
      <NavBar title="详情" rightText="收藏"  onClickRight={() => handleClickRight()} onClickLeft={() => navigate(-1)}></NavBar>
      <Swiper>
        {item.image.map((v, i) => {
          return (
            <Swiper.Item key={i}>
              <img src={v} alt="" style={{ width: "100%", height: 200 }} />
            </Swiper.Item>
          );
        })}
      </Swiper>
      <ListItem v={item} showImage={false}></ListItem>  
      <h4>评论列表{item.commList.length}</h4>
      <div className="comm-list">
        {item.commList.slice(0, loadMore ? Infinity : 3).map((v, i) => {
          return (
            <Cell
              key={i}
              title={v.nickname}
              label={v.content}
              icon={<Image width={44} height={44} src={v.avator} round />}
              value={v.datetime}
            ></Cell>
          );
        })}
      </div>
      <Divider style={{ color: '#3f45ff', borderColor: '#3f45ff', padding: '0 16px' }}>
        <span onClick={() => setLoadMore(!loadMore)}>{ loadMore ? '收起更多' : '加载更多' }</span>
      </Divider>
    </div>
  );
};

export default Index;
